<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JarManage</title>
    <script src="js/load.js"></script>
    <link rel="shortcut icon" href="images/favicon.png">
    <style>
        body {
            background-color: #f2f2f2;
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .header h2 {
            font-size: 18px;
            font-weight: 500;
            margin: 0;
        }

        .header .device-count {
            color: #666;
            font-size: 14px;
            margin-left: 10px;
        }

        .description {
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .devices-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .device-card {
            flex: 1;
            min-width: 250px;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            padding: 15px;
            position: relative;
            background: #fff;
        }

        .device-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .device-status {
            font-size: 14px;
            color: #5FB878;
            margin-bottom: 15px;
        }

        .device-status.offline {
            color: #FF5722;
        }

        .device-status.current {
            color: #666;
        }

        .add-device-card {
            flex: 1;
            min-width: 250px;
            border: 1px dashed #DCDFE6;
            border-radius: 2px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #999;
            background: #fff;
        }

        .add-device-card:hover {
            border-color: #1E9FFF;
            color: #1E9FFF;
        }

        .add-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .devices-container {
                flex-direction: column;
            }

            .device-card, .add-device-card {
                min-width: 100%;
            }
        }

    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div>
            <h2>主机管理</h2>
        </div>
        <button class="layui-btn" id="btnStart" onclick="AddDevice()">添加主机</button>
    </div>

    <div class="devices-container" id="view">

    </div>
</div>
<script type="text/html" id="device">
    {{#  layui.each(d.obj, function(index, item){ }}
    <div class="device-card">
        <div class="device-name"> {{item.deviceName}}</div>
        <div class="device-status current">{{item.deviceVisitAddress}}</div>
        <button class='layui-btn layui-btn-sm layui-btn-normal' onclick="HandleConnect('{{item.deviceID}}')"><i
                class='layui-icon layui-icon-link layui-font-12'></i>连接
        </button>
        {{# if (item.deviceID!='localhost') { }}
        <button class='layui-btn layui-btn-sm' onclick="HandleEdit('{{item.deviceID}}')"><i
                class='layui-icon layui-icon-edit layui-font-12'></i>编辑
        </button>
        <button class='layui-btn layui-btn-sm layui-btn-danger' onclick="HandleDelete('{{item.deviceID}}')"><i
                class='layui-icon layui-icon-delete layui-font-12'></i>删除
        </button>
        {{# } }}
    </div>
    {{#  }); }}
</script>
<script>
    $(function () {
        layui.use('laytpl', function() {})
        BindConfig();
        BindDevice();
    })

    function AddDevice(){
        OpenDialog('新增主机', 'pages/device/device_add.html', 600, 500, function () {
            BindDevice();
        })
    }

    function HandleConnect(deviceID){
        if(deviceID=='localhost'){
            var url = GetRootPath()+"main.html?deviceID="+deviceID;
             window.open(url);
        }else{
            var param = {
                deviceID: deviceID
            }
            HttpPost(JSON.stringify(param), 'api/device/detail', function (result) {
              if (result.code == 0) {
                   var deviceInfo = result.data.obj;
                   var loading = layer.load('主机连接检查中...', {
                    icon: 16,
                    shade: 0.01
                 })
                 $.ajax({
                        url: deviceInfo.deviceVisitAddress+"/sp/device/check",
                        type: 'GET',
                        timeout: 5000, // 设置超时时间为5秒[2,3](@ref)
                        success: function(data) {
                            layer.close(loading);
                            var url = GetRootPath()+"main.html?deviceID="+deviceID;
                             window.open(url)
                        },
                        error: function(xhr, textStatus, errorThrown) {
                            layer.close(loading);
                            if (textStatus === 'timeout') { // 判断是否为超时错误
                                OpenFail('主机超时未响应');
                            } else {
                                console.error('其他错误:', errorThrown);
                                OpenFail('主机超时未响应');
                            }
                        }
                });
              } else {
                 OpenFail(result.msg);
              }
           })   
        }
    }

    function HandleEdit(deviceID){
        OpenDialog('修改主机', 'pages/device/device_edit.html?deviceID=' + deviceID, 600, 500, function () {
            BindDevice();
        })
    }

    function HandleDelete(deviceID){
        OpenConfirm('确认删除？', function () {
            var param = {
                deviceID: deviceID
            }
            HttpPost(JSON.stringify(param), 'api/device/delete', function (result) {
                if (result.code == 0) {
                    OpenSuccessMessage("删除成功")
                    BindDevice();
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }

    function BindDevice(){
        var laytpl = layui.laytpl;
        var param = {

        }
        HttpPost(JSON.stringify(param), 'api/device/list', function (result) {
            if (result.code == 0) {
                var data = result.data;
                var localhost = {
                    "deviceID":"localhost",
                    "deviceName":"本机",
                    "deviceVisitAddress":"localhost"
                }
                data.obj.unshift(localhost)
                var getTpl = device.innerHTML
                var view = document.getElementById('view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function BindConfig(){
         var param = {

       }
       HttpPost(JSON.stringify(param), 'api/config/system', function (result) {
          if (result.code == 0) {
             var version = result.data.version;
             document.title = "JarManage-"+version;
          } else {
             OpenFail(result.msg);
          }
       })
    }
</script>
</body>
</html>